<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function checkName() {
            //向服务器发送AJAX的GET请求，第一个参数为请求服务器的URL地址
            //第二个参数为请求参数
            axios.get("/user/checkName",{
                params:{//请求表单数据
                    name:$("userName").value
                }
            }).then(resp => {//处理响应信息，resp表示响应对象
                var info = resp.data;//得到响应信息的消息体
                if (info == "yes"){
                    $("infoSpan").innerHTML = "用户已存在";
                    $("infoSpan").style.color = "red";
                }
                else {
                    $("infoSpan").innerHTML = "可以使用";
                    $("infoSpan").style.color = "green";
                }
            })
        }
        function $(id) {
            return document.getElementById(id);
        }
        async function send() {
            var info = "123";
            await axios.get("/user/speak",null).then(resp =>{
                info = resp.data;

            })
            alert(info)
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="userName" onblur="checkName()">
        <span id="infoSpan"></span>
<hr>
    <input type="button" value="点击" onclick="send()">
</body>
</html>